class CoverVideo {
	constructor (video) {
		this.video = video;
		this.computedStyle = window.getComputedStyle(this.video, null);
		if (this.video.poster) {
			this.poster = new Image();
			this.poster.onload = function () {
				window.addEventListener('resize', this.drawPoster.bind(this));
				this.drawPoster();
			}.bind(this);
			this.poster.src = this.video.poster;
		}
		this.video.addEventListener('play', this.drawVideo.bind(this), false);
	}

	draw (source) {
		this.replace();
		this.drawImageProp(this.canvas.getContext('2d'), source, 0, 0, this.canvas.width, this.canvas.height);
	}

	isPlaying () {
		return !this.video.paused && !this.video.ended;
	}

	drawPoster () {
		if (this.isPlaying() === false) {
			this.draw(this.poster);
		}
	}

	drawVideo () {
		if (this.isPlaying() === false) {
			return false;
		}
		if (this.timeout) {
			clearTimeout(this.timeout);
			this.timeout = null;
		}

		this.video.width =  this.video.videoWidth ? this.video.videoWidth : window.screen.width;
		this.video.height =  this.video.videoHeight ? this.video.videoHeight : window.screen.height;

		this.draw(this.video);
	}

	replace () {
		if (this.replaced) {
			return;
		}
		this.replaced = true;
		// this.video.parentNode.style.overflow = 'hidden' // prevent scrollbar of the parent
		// this.video.style.position = 'absolute'
		// this.video.style.zIndex = -1
		// this.video.style.visibility = 'hidden'
		if(!this.canvas){
			this.canvas = document.createElement('canvas');
			this.canvas.setAttribute('id','video-canvas');
			this.canvas.style.display = this.getVideoStyle('display');
		}
		this.video.parentNode.insertBefore(this.canvas, this.video.nextSibling);
		this.canvas.style.visibility = 'hidden';
		this.canvas.style.display = 'none';
		window.addEventListener('resize', this.adaptCanvas.bind(this));
		this.adaptCanvas();
	}

	closeView(){
		this.canvas ? this.canvas.style.display = 'none' : '';
	}

	getVideoStyle (name) {
		return this.computedStyle.getPropertyValue(name);
	}

	adaptCanvas () {
		this.canvas.width = Math.floor(parseInt(this.getVideoStyle('width')));
		this.canvas.height = Math.floor(parseInt(this.getVideoStyle('height')));

		if (this.isPlaying()) {
			this.drawVideo();
		} else if (this.poster) {
			this.drawPoster();
		}
	}

	drawImageProp (ctx, img, x, y, w, h, offsetX, offsetY) {
		if (arguments.length === 2) {
			x = y = 0;
			w = ctx.canvas.width;
			h = ctx.canvas.height;
		}

		// default offset is center
		offsetX = typeof offsetX === 'number' ? offsetX : 0.5;
		offsetY = typeof offsetY === 'number' ? offsetY : 0.5;

		// keep bounds [0.0, 1.0]
		if (offsetX < 0) offsetX = 0;
		if (offsetY < 0) offsetY = 0;
		if (offsetX > 1) offsetX = 1;
		if (offsetY > 1) offsetY = 1;

		// eslint-disable-next-line one-var
		var iw = img.width,
			ih = img.height,
			r = Math.min(w / iw, h / ih),
			nw = iw * r, // new prop. width
			nh = ih * r, // new prop. height
			cx, cy, cw, ch, ar = 1;

		// decide which gap to fill
		if (nw < w) ar = w / nw;
		if (nh < h) ar = h / nh;
		nw *= ar;
		nh *= ar;

		// calc source rectangle
		cw = iw / (nw / w);
		ch = ih / (nh / h);

		cx = (iw - cw) * offsetX;
		cy = (ih - ch) * offsetY;

		// make sure source rectangle is valid
		if (cx < 0) cx = 0;
		if (cy < 0) cy = 0;
		if (cw > iw) cw = iw;
		if (ch > ih) ch = ih;

		// fill image in dest. rectangle
		ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);
		this.image = this.canvas.toDataURL('image/png');
	}
}

export default CoverVideo;
